﻿
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            /*height: 100%;*/
            background-color: #eee;
            font-family: 'Raleway';
        }

        ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .icon {
            position: relative;
            width: 32px;
            height: 32px;
            display: block;
            fill: rgba(51, 51, 51, 0.5);
            margin-right: 20px;
            -webkit-transition: all .2s ease-out;
            transition: all .2s ease-out;
        }

        #wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: left;
            -webkit-justify-content: left;
            -ms-flex-pack: left;
            justify-content: left;
            overflow: hidden;
        }

        #left-side {
            height: 100%;
            width: 10%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            /* -webkit-align-items: center;*/
            -ms-flex-align: center;
            /* align-items: center;*/
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

            #left-side ul li {
                padding-top: 10px;
                padding-bottom: 10px;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                line-height: 58px;
                color: rgba(51, 51, 51, 0.5);
                font-weight: 500;
                cursor: pointer;
                -webkit-transition: all .2s ease-out;
                transition: all .2s ease-out;
            }

                #left-side ul li:hover {
                    color: #333333;
                    -webkit-transition: all .2s ease-out;
                    transition: all .2s ease-out;
                }

                #left-side ul li.active {
                    color: #E74C3C;
                }



        #border {
            height: 100%;
            width: 1px;
            background-color: rgba(51, 51, 51, 0.2);
        }

            #border #line.one {
                width: 5px;
                height: 58px;
                background-color: #E74C3C;
                margin-left: -2px;
                margin-top: 15px;
                -webkit-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out;
            }

            #border #line.two {
                width: 5px;
                height: 54px;
                background-color: #E74C3C;
                margin-left: -2px;
                margin-top: 89px;
                -webkit-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out;
            }

            #border #line.three {
                width: 5px;
                height: 58px;
                background-color: #E74C3C;
                margin-left: -2px;
                margin-top: 165px;
                -webkit-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out;
            }

            #border #line.four {
                width: 5px;
                height: 58px;
                background-color: #E74C3C;
                margin-left: -2px;
                margin-top: 250px;
                -webkit-transition: all .4s ease-in-out;
                transition: all .4s ease-in-out;
            }

        #right-side {
            height: 100%;
            width: 90%;
            overflow: hidden;
        }
       
        #right-side table {
            margin:  0;
        }

        #right-side tr {
            height: 28px;
        }

        .box {
            padding: 20px;
            background-color: #fff;
            /*margin: 50px 100px;*/
            border-radius: 5px;
        }

            .box a {
                padding-right: 15px;
            }

        #about_hide {
            display: none;
        }


        .layer_text {
            background-color: #fff;
            padding: 20px;
        }

            .layer_text p {
                margin-bottom: 10px;
                text-indent: 2em;
                line-height: 23px;
            }

        .button {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            line-height: 30px;
            padding: 0 20px;
            background-color: #56B4DC;
            color: #fff;
            font-size: 14px;
            border-radius: 3px;
            cursor: pointer;
            font-weight: normal;
        }

     
  #preview {
        position: relative;
        float: left;
        height: 60px;
    }

        #preview li {
            width: 83px;
            overflow: hidden;
            position: relative;
            float: left;
            height: 60px;
        }

        #preview img {
            width: 60px;
            position: relative;
            float: left;
        }
        #preview a {
            position: relative;
            float: right;
            top: -5px;
            right: 0px;
            z-index: 2;
        }
    .photo-mask {
        position: fixed;
        z-index: 10;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8);
        filter: alpha(opacity=20);
        -moz-opacity: 0.8;
        opacity: 0.8;
        display: none;
    }

    .photo-panel {
        position: absolute;
        display: none;
        clear: both;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 10;
    }

        .photo-panel .photo-div,
        .photo-panel .photo-bar {
            width: 100%;
        }

        .photo-panel .photo-div {
            width: 960px;
            height: 560px;
            z-index: 11;
            margin: auto;
            position: relative;
        }

        .photo-panel .photo-close {
            background: url(/Content/images/close.png);
            width: 56px;
            height: 56px;
            position: absolute;
            margin-left: 664px;
        }

            .photo-panel .photo-close:hover {
                background: url(/Content/images/close_ch.png);
                width: 56px;
                height: 56px;
                position: absolute;
                margin-left: 664px;
            }

        .photo-panel .photo-bar-tip {
            width: 700px;
            height: 44px;
            position: absolute;
            margin-top: -64px;
            padding: 10px;
        }

            .photo-panel .photo-bar-tip:hover {
                width: 700px;
                height: 44px;
                position: absolute;
                margin-top: -64px;
                background: #000;
                filter: alpha(opacity=20);
                -moz-opacity: 0.8;
                opacity: 0.8;
                color: #fff;
                padding: 10px;
            }

        .photo-panel .photo-img {
            width: 720px;
            float: left;
            height: 560px;
            background: #fff;
        }

        .photo-panel .photo-view-w {
            width: 720px;
            height: 560px;
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }

        .photo-panel .photo-view-h {
            width: 720px;
            height: 560px;
            text-align: center;
            vertical-align: middle;
        }

        .photo-panel .photo-view-w img {
            max-width: 700px;
            height: auto;
            vertical-align: middle;
            text-align: center;
            max-height: 540px;
            margin: 10px;
            -moz-box-shadow: 5px 5px 5px #a6a6a6;
            /* 老的 Firefox */
            box-shadow: 5px 5px 5px #a6a6a6;
            -webkit-animation: swing 1s .2s ease both;
            -moz-animation: swing 1s .2s ease both;
        }

        .photo-panel .photo-view-h img {
            max-width: 700px;
            height: 540px;
            margin: 10px;
            -moz-box-shadow: 5px 5px 5px #a6a6a6;
            /* 老的 Firefox */
            box-shadow: 5px 5px 5px #a6a6a6;
            -webkit-animation: swing 1s .2s ease both;
            -moz-animation: swing 1s .2s ease both;
        }

   @-webkit-keyframes swing {
		20%,
		40%,
		60%,
		80%,
		100% {
			-webkit-transform-origin: top center
		}
		20% {
			-webkit-transform: rotate(15deg)
		}
		40% {
			-webkit-transform: rotate(-10deg)
		}
		60% {
			-webkit-transform: rotate(5deg)
		}
		80% {
			-webkit-transform: rotate(-5deg)
		}
		100% {
			-webkit-transform: rotate(0deg)
		}
	}
	
	@-moz-keyframes swing {
		20%,
		40%,
		60%,
		80%,
		100% {
			-moz-transform-origin: top center
		}
		20% {
			-moz-transform: rotate(15deg)
		}
		40% {
			-moz-transform: rotate(-10deg)
		}
		60% {
			-moz-transform: rotate(5deg)
		}
		80% {
			-moz-transform: rotate(-5deg)
		}
		100% {
			-moz-transform: rotate(0deg)
		}
	}
	

    .photo-panel .photo-left,
    .photo-panel .photo-right {
        width: 120px;
        float: left;
        margin-top: 220px;
    }

        .photo-panel .arrow-prv {
            background: url(/Content/images/l.png);
            width: 120px;
            height: 120px;
        }

            .photo-panel .arrow-prv:hover {
                background: url(/Content/images/l_ch.png);
                width: 120px;
                height: 120px;
                cursor: pointer;
            }

        .photo-panel .arrow-next {
            background: url(/Content/images/r.png);
            width: 120px;
            height: 120px;
        }

            .photo-panel .arrow-next:hover {
                background: url(/Content/images/r_ch.png);
                width: 120px;
                height: 120px;
                cursor: pointer;
            }